<template>
    <a-card style="margin-top:20px;">
        <h3 slot="title" class="c-header-title">数据分析<span></span></h3>
        <div slot="extra" class="c-header-extra tabs">
                      <span v-if="params.type !== 'custom'">
                        <span :class="['tab',{'tab-active':params.type==='today'}]" @click="onTabChange('today')">今日</span>
                        <a-divider type="vertical" />
                        <span :class="['tab',{'tab-active':params.type==='yesterday'}]" @click="onTabChange('yesterday')">昨日</span>
                        <a-divider type="vertical" />
                        <span :class="['tab',{'tab-active':params.type==='week'}]" @click="onTabChange('week')">本周</span>
                        <a-divider type="vertical" />
                        <span :class="['tab',{'tab-active':params.type==='month'}]" @click="onTabChange('month')">本月</span>
                      </span>
            <span v-else>
                           <a-range-picker style="text-align: left;width:310px;margin-right:5px;" v-model="params.dates" :showTime="{ hideDisabledOptions: true,
                             defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"  format="YYYY-MM-DD HH:mm:ss" />
                          <a-button type="primary" @click="onSearch" >确定</a-button>
                      </span>
            <a-divider type="vertical" />
            <a-button class="ant-btn-iconText color-green font16" shape="circle" size="small" icon="plus-circle" @click="onTabChange('custom')" v-if="params.type !== 'custom'"></a-button>
            <a-button class="ant-btn-iconText color-green font16" shape="circle" size="small" icon="close-circle" @click="onTabChange('today')" v-else></a-button>
        </div>
        <a-card-grid style="width:100%;">
            <h3 class="title">消费密集度分布统计</h3>
            <line-chart :chartData="chartData"/>
        </a-card-grid>
        <a-card-grid style="width:100%;">
            <h3 class="title">客单价分布统计</h3>
           <doughnut-chart :chartData="doughnutChartData"></doughnut-chart>
        </a-card-grid>


    </a-card>

</template>

<script>
    import moment from 'moment';
    import {findMemberDataStat} from "../../api/dashboard";
    import {LineChart,DoughnutChart} from '@/components/charts'
    export default {
        name: "MemberData",
        components:{LineChart,DoughnutChart},
        data(){
            return{
                params:{
                    type:'today',
                    beginDate:moment().format("YYYY-MM-DD 00:00:00"),
                    endDate: moment().format("YYYY-MM-DD 23:59:59"),
                    dates:[],
                },
                chartData:{},
                doughnutChartData:{},
            }
        },
        methods:{
            moment,
            onSearch(){
                if (this.params.dates.length == 0) {
                    this.$message.info('请选择查询日期');
                    return;
                }
                this.params.beginDate = this.params.dates[0].format('YYYY-MM-DD HH:mm:ss');
                this.params.endDate = this.params.dates[1].format('YYYY-MM-DD HH:mm:ss');
                this.onLoad();
            },
            onTabChange(tab){
                if(this.params.type == tab) return;
                switch(tab){
                    case "today":
                        this.params.beginDate = moment().format("YYYY-MM-DD 00:00:00");
                        this.params.endDate = moment().format("YYYY-MM-DD 23:59:59");
                        break;
                    case "yesterday":
                        this.params.beginDate = moment().subtract(1, 'days').format("YYYY-MM-DD 00:00:00");
                        this.params.endDate = moment().subtract(1, 'days').format("YYYY-MM-DD 23:59:59");
                        break;
                    case "week":
                        let weekOfDay = moment().format('E');//计算今天是这周第几天
                        this.params.beginDate = moment().subtract(weekOfDay-1, 'days').format('YYYY-MM-DD 00:00:00');//周一日期
                        this.params.endDate = moment().add(7-weekOfDay, 'days').format('YYYY-MM-DD 23:59:59');//周日日期
                        break;
                    case "month":
                        this.params.beginDate = moment().format('YYYY-MM-01 00:00:00');//本月一号日期
                        this.params.endDate = moment(this.params.beginDate).add(1,"months").subtract(1, 'days').format('YYYY-MM-DD 23:59:59');//本月最后一天日期
                        break;
                    case "custom":
                        this.params.beginDate = moment().subtract(14,"days").format('YYYY-MM-DD 00:00:00');//本月一号日期
                        this.params.endDate = moment().format('YYYY-MM-DD 23:59:59');//本月最后一天日期
                        this.params.dates = [moment(this.params.beginDate),moment(this.params.endDate)];
                        break;
                }
                this.params.type = tab;
                this.onLoad();
            },
            async onLoad(){
                let resp = await findMemberDataStat(this.params);
                if(!this.qUtil.validResp(resp)){
                    this.$error({title:'请求失败!',okText:'确定'});
                    return false;
                }
                this.chartData = resp.data.memberOrderVolume;
                this.doughnutChartData = resp.data.memberPrice;
                console.log("===doughnutChartData",this.doughnutChartData);

            }
        },
        mounted(){
            this.onLoad();
        }
    }
</script>

<style scoped>
    .title{
        padding:0 10px;
        margin-bottom: 10px;
        border-left:4px solid #3283FA;
    }
    .c-header-extra{
        text-align: right;
        font-size:14px;
        color:#aaa;
    }
    .c-header-extra.tabs .tab{
        cursor: pointer;
    }
    .c-header-extra.tabs .tab-active{
        color:#0099CC;
    }
</style>